﻿<!DOCTYPE html>
<html>

	<head>
		<title>填写手机号码</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<meta name="description" content="登录系统">
		<link href="./public/css/jquery-weui.css" rel="stylesheet" type="text/css" />
		<link href="./public/css/weui.css" rel="stylesheet" type="text/css" />
		<script src="./public/js/zepto.min.js" type="text/javascript"></script>
		<link href="./public/css/weui.min.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" href="./public/css/jquery-weui.css">
		<link rel="stylesheet" href="./public/css/css.css">
	</head>
	<body ontouchstart>
		<form id="form">
			<header class="bars bar-nav">
				<a href="#" class="icon pull-left"><i class="sst-wode">
            <img src="./public/images/arr_03.png" width="100%" />
        </i></a>
				<h1 class="title">
            填写手机号码</h1>
			</header>
			<div class="weui_cells weui_cells_form">
				<div class="weui_cell">
					<div class="weui_cell_hd">
						<select class="weui-select" name="select2">
							<option value="1">中国+86</option>
						</select>
					</div>
					<div class="weui_cell_bd weui_cell_primary">
						<input class="weui_input" type="tel" required pattern="[0-9]{11}" maxlength="11" placeholder="请输入11位的手机号码" emptytips="请输入11位的手机号码" notmatchtips="请输入正确的手机号">
					</div>
					<div class="weui_cell_ft">
						<i class="weui_icon_warn"></i>
					</div>
				</div>
				<div class="weui_cell weui_cell_warn notopb nobotb" id="bijiao">
					<div class="weui_btn_area">
						<input id="formSubmitBtn" type="button" value="下一步" class="weui_btn weui_btn_primary" />
					</div>
				</div>
			</div>
			<div class="weui-cells_checkbox notopb">
				<label class="weui-cell weui-check__label" for="s11">
            <div class="weui-cell__hd">
                <input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked">
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                <p>
                    <span class="weui-agree-text">我已阅读并同意<a href="javascript:void(0);">使用条款和隐私政策</a>
                    </span>
                </p>
            </div>
        </label>
			</div>
		</form>
		<script>
			var $form = $("#form");
			$form.form();
			$("#formSubmitBtn").on("click", function() {
				$form.validate(function(error) {
					if(error) {
						$("#bijiao").addClass("weui_cell_warn");

					} else {
						$("#bijiao").removeClass("weui_cell_warn");
						$.toptips('验证通过提交', 'ok');
					}
				});

			});
			$(function() {
				$(".weui_cell_bd .weui_input").keyup(function() {
					if($(this).val().length == 11) { $("#bijiao").removeAttr("disabled"); } else { $("#bijiao").attr("disabled", "disabled"); }
				});
			})
		</script>
	</body>

</html>